<template>
	<view>
		<button type="default" size="mini" class="btn" @click="reviseInfo">修改用户信息</button>
		<!-- 展示个人信息 -->
		<view class="showInfo" v-if="isShowInfo">
			<view class="item">
				<text>头像</text>
				<image :src="myInfo.icon" mode=""></image>
			</view>
			<view class="item">
				<text>用户名</text>
				<text>{{myInfo.username}}</text>
			</view>
			<view class="item">
				<text>昵称</text>
				<text>{{myInfo.nickname}}</text>
			</view>
			<view class="item">
				<text>手机号</text>
				<text>{{myInfo.phone}}</text>
			</view>
			<button type="default" class="out" @click="outLogin">退出登录</button>
		</view>
		<!-- 编辑个人信息 -->
		<view class="edit" v-else>
			<view class="item">
				<text>头像</text>
				<view>
					<button type="default" class="uploadbtn" @tap="uploadIcon" v-if="isBtnShow">上传头像</button>
					<image :src="myInfo.icon" mode="" v-else></image>
				</view>
			</view>
			<view class="item">
				<text>用户名</text>
				<input type="text" v-model="myInfo.username" />
			</view>
			<view class="item">
				<text>昵称</text>
				<input type="text" v-model="myInfo.nickname" />
			</view>
			<view class="item">
				<text>手机号</text>
				<input type="text" v-model="myInfo.phone" />
			</view>
			<button type="default" class="out" @click="upload">更新信息</button>
		</view>
		
	</view>
</template>

<script>
	import { getMemberInfo , updateMemberInfo } from "../../../api/my/usercenter/usercenter.js";
	import baseUrl from "../../../api/baseUrl.js";
	import mix from "../../../mixins/mixins.js";
	export default {
		data() {
			return {
				myInfo:{},
				// 切换展示信息页面还是修改页面
				isShowInfo:true,
				// 上传头像按钮是否隐藏
				isBtnShow: true
			};
		},
		mixins:[mix],
		methods:{
			// 修改页面显示
			reviseInfo(){
				this.isShowInfo = false
			},
			// 上传头像
			uploadIcon(){
				uni.chooseImage({
					count:1,
					success:res=>{
						console.log(res);
						uni.uploadFile({
							url: baseUrl + '/lejuClient/login/uploadAvatar',
							filePath: res.tempFilePaths[0],
							name:'file',
							success:res=>{
								console.log(res);
								this.isBtnShow = false;
								// 获取头像信息,网络路径！！！！
								this.myInfo.icon = JSON.parse(res.data).data.fileUrl;
								
							}
						})
					}
				})
			},
			// 更新个人信息
			upload(){
				updateMemberInfo(this.myInfo).then(res=>{
					getMemberInfo().then(res=>{
						this.myInfo = res.data.userInfo;
						// 重新将最新的用户信息存入本地
						uni.setStorageSync('userInfo',res.data.userInfo);
						this.isShowInfo = true;
					})
				})
			},
			// 退出登录
			outLogin(){
				uni.removeStorageSync('userInfo');
				uni.removeStorageSync('token');
				uni.navigateTo({
					url:'../login/login'
				})
			},
			// 初始化获取个人信息
			init(){
				getMemberInfo().then(res=>{
					// console.log(res);
					this.myInfo = res.data.userInfo;
					console.log(1)
				})
			}
		},
		onShow() {
			var token = uni.getStorageSync('token');
			
			if(token){
				this.init();
			}else {
				this.myInfo = {};
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.btn {
		float: right;
		margin: 20rpx;
		color: #353535;
		border: 2rpx solid #353535;
		background-color: rgba(0,0,0,0);
	}
	.item {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32rpx;
		line-height: 94rpx;
		box-sizing: border-box;
		padding: 10rpx 30rpx;
		border-bottom: 2rpx solid #e5e5e5;
		 image {
			 width: 120rpx;
			 height: 120rpx;
			 border-radius: 50%;
		 }
		 input {
			 text-align: right;
		 }
	}
	.out {
		position: fixed;
		left: 50%;
		bottom: 20%;
		margin-left: -184rpx;
		width: 370rpx;
		height: 88rpx;
		font-size: 32rpx;
		color: #fff;
		text-align: center;
		line-height: 88rpx;
		background: #1c4b47;
		border-radius: 16rpx;
	}
	.uploadbtn {
		// float: right;
		width: 180rpx;
		height: 60rpx;
		font-size: 26rpx;
		line-height: 60rpx;
		border: 2rpx solid #353535;
		background-color: rgba(0,0,0,0);
	}
</style>
